<template>
  <div>


    <van-row type="flex" style="margin-top: 10%;" justify="center">
      <van-form @submit="onSubmit">
        <van-field
                v-model="tel"
                type="tel"
                name="phone"
                label="手机号"
                placeholder="手机号"
                maxlength="11"
                :rules="[{ required: true,pattern, message: '请填写手机号' }]"
        />

        <van-field
                v-model="nickName"
                type="text"
                name="nickName"
                label="昵称"
                placeholder="请输入昵称"
                :rules="[{ required: true, message: '请输入昵称' }]"
        />

        <van-field
                v-model="password"
                type="password"
                name="password"
                label="密码"
                placeholder="密码"
                :rules="[{ required: true, message: '请填写密码' }]"
        />
        <div style="margin: 16px;">
          <van-button round block type="info" native-type="failed">
            立刻注册
          </van-button>
        </div>
      </van-form>
    </van-row>

    <van-row type="flex"  justify="center">
      <span>已经有账号？</span><a  is-link href="/login">立刻登录</a>
    </van-row>
  </div>
</template>

<script>
  import { Dialog } from 'vant';
  import {postRequest} from "network/postRequest";

  export default {
    data() {
      return {
        tel: '',
        password: '',
        nickName: '',
        pattern: /^1[3456789]\d{9}$/,
      };
    },
    methods: {
      onSubmit() {
        let data={
          "nickName":this.nickName,
          "password":this.password,
          "phone":this.tel
        }
        postRequest(data,"/user/register/").then(res => {
          if (res.code ==200) {
            Dialog({ message: "注册成功，请登录" }).then(()=>{
              this.$router.push({path:'/login'})
            })
          } else {
            Dialog({ message: res.msg })
          }
        })
      },
    },
  };

</script>
